<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Umega App - Blank Template</title>
    <!-- PACE-->
    <link rel="stylesheet" type="text/css" href="plugins/PACE/themes/blue/pace-theme-flash.css">
    <script type="text/javascript" src="plugins/PACE/pace.min.js"></script>
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap/dist/css/bootstrap.min.css">
    <!-- Fonts-->
    <link rel="stylesheet" type="text/css" href="plugins/themify-icons/themify-icons.css">
    <link rel="stylesheet" type="text/css" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Malihu Scrollbar-->
    <link rel="stylesheet" type="text/css" href="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
    <!-- Animo.js-->
    <link rel="stylesheet" type="text/css" href="plugins/animo.js/animate-animo.min.css">
    <!-- Bootstrap Progressbar-->
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css">
    <!-- Summernote-->
    <link rel="stylesheet" type="text/css" href="plugins/summernote/dist/summernote.css">
    <!-- Primary Style-->
    <link rel="stylesheet" type="text/css" href="build/css/umega.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file://--> 
    <!--[if lt IE 9]>
    <script type="text/javascript" src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script type="text/javascript" src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- Main Sidebar start-->
    <aside class="main-sidebar pinned">
      <div class="brand"><a href="index.html" class="logo"><i class="ti-underline"></i>
          <h2>MEGA<span>app</span></h2></a><a href="javascript:;" role="button" class="sidebar-toggle visible-xs-block"><i class="ti-close text-white"></i></a></div>
      <div class="profile"><img src="build/images/users/04.jpg" alt="" class="avatar img-circle"><span class="status bg-success"></span>
        <h5 class="text-white mb-5">Matthew Gonzalez</h5>
        <div class="text-muted">Designer</div>
      </div>
      <!-- Nav tabs-->
      <ul role="tablist" class="nav nav-tabs nav-justified nav-sidebar">
        <li role="presentation" class="active"><a href="#menu" aria-controls="menu" role="tab" data-toggle="tab"><i class="ti-menu"></i></a></li>
        <li role="presentation"><a href="#portfolio" aria-controls="portfolio" role="tab" data-toggle="tab"><i class="ti-user"></i></a></li>
        <li role="presentation" class="bubble"><a href="#email" aria-controls="email" role="tab" data-toggle="tab"><i class="ti-email"><span class="dot bg-danger"></span></i></a></li>
        <li role="presentation"><a href="#setting" aria-controls="setting" role="tab" data-toggle="tab"><i class="ti-server"></i></a></li>
      </ul>
      <!-- Tab panes-->
      <div class="tab-content nav-sidebar-content">
        <div id="menu" role="tabpanel" class="tab-pane fade in active">
          <ul class="list-unstyled navigation mb-0">
            <li class="header">Main</li>
            <li><a href="index.html" class="bubble"><i class="ti-home"></i> Dashboard<span class="badge bg-danger">3</span></a></li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse2" aria-expanded="false" aria-controls="collapse2" class="collapsed"><i class="ti-palette"></i> Skins</a>
              <ul id="collapse2" class="list-unstyled collapse">
                <li><a href="red-skin.html">Red</a></li>
                <li><a href="green-skin.html">Green</a></li>
                <li><a href="yellow-skin.html">Yellow</a></li>
              </ul>
            </li>
            <li class="header">Components</li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse3" aria-expanded="false" aria-controls="collapse3" class="collapsed"><i class="ti-receipt"></i> Basic</a>
              <ul id="collapse3" class="list-unstyled collapse">
                <li><a href="buttons.html">Buttons</a></li>
                <li><a href="carousels.html">Carousels</a></li>
                <li><a href="containers.html">Containers</a></li>
                <li><a href="dialogs.html">Dialogs</a></li>
                <li><a href="basic-inputs.html">Inputs</a></li>
                <li><a href="navigations.html">Navigations</a></li>
                <li><a href="progress-bars.html">Progress bars</a></li>
                <li><a href="typography.html">Typography</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse4" aria-expanded="false" aria-controls="collapse4" class="collapsed"><i class="ti-ruler-pencil"></i> Editors</a>
              <ul id="collapse4" class="list-unstyled collapse">
                <li><a href="summernote.html">Summernote</a></li>
                <li><a href="bootstrap-markdown.html">Bootstrap markdown</a></li>
                <li><a href="code-prettify.html">Code prettify</a></li>
                <li><a href="ckeditor.html">CKEditor</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse5" aria-expanded="false" aria-controls="collapse5" class="collapsed"><i class="ti-location-arrow"></i> Pickers</a>
              <ul id="collapse5" class="list-unstyled collapse">
                <li><a href="color-picker.html">Color picker</a></li>
                <li><a href="datetime-picker.html">Datetime picker</a></li>
                <li><a href="clock-picker.html">Clock picker</a></li>
                <li><a href="date-range-picker.html">Date range picker</a></li>
                <li><a href="multi-select.html">Multi select</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse6" aria-expanded="false" aria-controls="collapse6" class="collapsed"><i class="ti-layers-alt"></i> Forms</a>
              <ul id="collapse6" class="list-unstyled collapse">
                <li><a href="form-layouts.html">Layouts</a></li>
                <li><a href="jquery-validation.html">Validation</a></li>
                <li><a href="jquery-steps.html">Wizard</a></li>
                <li><a href="other-plugins.html">Other plugins</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse7" aria-expanded="false" aria-controls="collapse7" class="collapsed"><i class="ti-face-smile"></i> Icons</a>
              <ul id="collapse7" class="list-unstyled collapse">
                <li><a href="glyphicons.html">Glyphicons</a></li>
                <li><a href="font-awesome.html">Font awesome</a></li>
                <li><a href="material-design.html">Material design</a></li>
                <li><a href="themify.html">Themify</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse8" aria-expanded="false" aria-controls="collapse8" class="collapsed"><i class="ti-layout-grid2"></i> Tables</a>
              <ul id="collapse8" class="list-unstyled collapse">
                <li><a href="basic-tables.html">Basic tables</a></li>
                <li><a href="data-tables.html">Data tables</a></li>
                <li><a href="pricing-tables.html">Pricing tables</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse9" aria-expanded="false" aria-controls="collapse9" class="collapsed"><i class="ti-control-forward"></i> Animations</a>
              <ul id="collapse9" class="list-unstyled collapse">
                <li><a href="basic-animations.html">Basic</a></li>
                <li><a href="loading-animations.html">Loading</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse10" aria-expanded="false" aria-controls="collapse10" class="collapsed"><i class="ti-upload"></i> File uploads</a>
              <ul id="collapse10" class="list-unstyled collapse">
                <li><a href="dropzone-js.html">Dropzone</a></li>
                <li><a href="bootstrap-file-input.html">Bootstrap file input</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse11" aria-expanded="false" aria-controls="collapse11" class="collapsed"><i class="ti-info-alt"></i> Indicators</a>
              <ul id="collapse11" class="list-unstyled collapse">
                <li><a href="toastr.html">Toastr</a></li>
                <li><a href="sweet-alert.html">Sweet alert</a></li>
              </ul>
            </li>
            <li class="header">Data visualization</li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse12" aria-expanded="false" aria-controls="collapse12" class="collapsed"><i class="ti-bar-chart"></i> Charts</a>
              <ul id="collapse12" class="list-unstyled collapse">
                <li><a href="flot-charts.html">Flot charts</a></li>
                <li><a href="morris-charts.html">Morris charts</a></li>
                <li><a href="chart-js.html">Chart.js</a></li>
                <li><a href="other-charts.html">Other charts</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse13" aria-expanded="false" aria-controls="collapse13" class="collapsed"><i class="ti-location-pin"></i> Maps</a>
              <ul id="collapse13" class="list-unstyled collapse">
                <li><a href="vector-maps.html">Vector maps</a></li>
                <li><a href="google-maps.html">Google maps</a></li>
              </ul>
            </li>
            <li class="header">Page kits</li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse14" aria-expanded="false" aria-controls="collapse14" class="collapsed"><i class="ti-alert"></i> Error pages</a>
              <ul id="collapse14" class="list-unstyled collapse">
                <li><a href="400.html">400 Bad request</a></li>
                <li><a href="401.html">401 Unauthorized</a></li>
                <li><a href="403.html">403 Forbidden</a></li>
                <li><a href="404.html">404 Not found</a></li>
                <li><a href="500.html">500 Internal server error</a></li>
                <li><a href="503.html">503 Service unavailable</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse15" aria-expanded="false" aria-controls="collapse15" class="collapsed"><i class="ti-user"></i> User pages</a>
              <ul id="collapse15" class="list-unstyled collapse">
                <li><a href="login.html">Login</a></li>
                <li><a href="register.html">Registration</a></li>
                <li><a href="forgot.html">Forgot password</a></li>
                <li><a href="lock-screen.html">Lock screen</a></li>
                <li><a href="profile.html">Profile</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse16" aria-expanded="false" aria-controls="collapse16" class="collapsed"><i class="ti-panel"></i> Apps</a>
              <ul id="collapse16" class="list-unstyled collapse">
                <li><a href="mailbox.html">Mailbox</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li><a href="image-cropper.html">Image cropper</a></li>
              </ul>
            </li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse17" aria-expanded="false" aria-controls="collapse17" class="collapsed"><i class="ti-blackboard"></i> Extra pages</a>
              <ul id="collapse17" class="list-unstyled collapse">
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="search-results.html">Search results</a></li>
                <li><a href="blank-template.html">Blank template</a></li>
              </ul>
            </li>
            <li class="header">Help</li>
            <li><a href="documentation.html" class="active"><i class="ti-help-alt"></i> Documentation</a></li>
            <li class="header">Menu Levels</li>
            <li class="panel"><a role="button" data-toggle="collapse" data-parent=".navigation" href="#collapse18" aria-expanded="false" aria-controls="collapse18" class="collapsed"><i class="ti-folder"></i> Menu levels</a>
              <ul id="collapse18" class="list-unstyled collapse">
                <li><a href="#">Menu level 2.1</a></li>
                <li class="panel"><a role="button" data-toggle="collapse" data-parent="#collapse18" href="#collapse21" aria-expanded="false" aria-controls="collapse21" class="collapsed">Menu level 2.2</a>
                  <ul id="collapse21" class="list-unstyled collapse">
                    <li><a href="#">Menu level 3.1</a></li>
                    <li class="panel"><a role="button" data-toggle="collapse" data-parent="#collapse21" href="#collapse31" aria-expanded="false" aria-controls="collapse31" class="collapsed">Menu level 3.2</a>
                      <ul id="collapse31" class="list-unstyled collapse">
                        <li><a href="#">Menu level 4.1</a></li>
                        <li class="panel"><a role="button" data-toggle="collapse" data-parent="#collapse31" href="#collapse41" aria-expanded="false" aria-controls="collapse41" class="collapsed">Menu level 4.2</a>
                          <ul id="collapse41" class="list-unstyled collapse">
                            <li><a href="#">Menu level 5.1</a></li>
                            <li><a href="#">Menu level 5.2</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <div class="header">Server Status</div>
          <ul class="list-unstyled pl-15 pr-15">
            <li class="mb-20">
              <div class="block clearfix mb-10"><span class="pull-left fs-12 text-muted">CPU Used</span><span class="pull-right label label-outline label-warning">65%</span></div>
              <div class="progress progress-xs mb-0">
                <div role="progressbar" data-transitiongoal="65" class="progress-bar progress-bar-warning"></div>
              </div>
            </li>
            <li class="mb-20">
              <div class="block clearfix mb-10"><span class="pull-left fs-12 text-muted">Bandwidth</span><span class="pull-right label label-outline label-danger">80%</span></div>
              <div class="progress progress-xs mb-0">
                <div role="progressbar" data-transitiongoal="80" class="progress-bar progress-bar-danger"></div>
              </div>
            </li>
          </ul>
        </div>
        <div id="portfolio" role="tabpanel" class="tab-pane fade">
          <div class="header">Rating</div>
          <div class="rating clearfix">
            <div class="pull-left score bg-black fs-24 fw-600 text-center">4.2</div>
            <div class="pull-left">
              <div class="progress">
                <div role="progressbar" data-transitiongoal="100" class="progress-bar five-star"></div>
              </div>
              <div class="progress">
                <div role="progressbar" data-transitiongoal="80" class="progress-bar four-star"></div>
              </div>
              <div class="progress">
                <div role="progressbar" data-transitiongoal="10" class="progress-bar three-star"></div>
              </div>
              <div class="progress">
                <div role="progressbar" data-transitiongoal="25" class="progress-bar two-star"></div>
              </div>
              <div class="progress">
                <div role="progressbar" data-transitiongoal="5" class="progress-bar one-star"></div>
              </div>
            </div>
          </div>
          <p class="text-center fs-12 mt-5 mb-0">average based on 1,056 ratings</p>
          <div class="header">Followers</div>
          <div class="followers"><img src="build/images/users/02.jpg" alt="" class="img-circle"><img src="build/images/users/03.jpg" alt="" class="img-circle"><img src="build/images/users/10.jpg" alt="" class="img-circle"><a href="#" class="more img-circle text-center fs-24 fw-600 text-info">+</a></div>
          <p class="text-center fs-12 mt-5 mb-0">2,590 followers and 8,320 sales</p>
          <div class="header">Visitors</div>
          <div id="sp-visitors"></div>
          <p class="text-center fs-12 mt-5 mb-0">3,320 visitors in last 10 days</p>
          <div class="header">Revenue</div>
          <div id="sp-revenue"></div>
          <p class="text-center fs-12 mt-5 mb-0">8.59k revenue estimate in last 10 days</p>
          <div class="header">Your New Blog Posts</div>
          <ul class="posts media-list">
            <li class="media">
              <div class="media-left"><a href="#" class="inline-block"><img src="build/images/posts/01.jpg" alt="" class="media-object mo-lg"></a></div>
              <div class="media-body media-middle"><a href="#">
                  <h6 class="media-heading text-muted">The first chapter</h6></a>
                <time datetime="2015-09-14T14:28:26+07:00" class="fs-11">September 14, 2015</time>
              </div>
            </li>
            <li class="media">
              <div class="media-left"><a href="#" class="inline-block"><img src="build/images/posts/02.jpg" alt="" class="media-object mo-lg"></a></div>
              <div class="media-body media-middle"><a href="#">
                  <h6 class="media-heading text-muted">A simple image post</h6></a>
                <time datetime="2015-10-10T20:27:48+07:00" class="fs-11">October 10, 2015</time>
              </div>
            </li>
            <li class="media">
              <div class="media-left"><a href="#" class="inline-block"><img src="build/images/posts/03.jpg" alt="" class="media-object mo-lg"></a></div>
              <div class="media-body media-middle"><a href="#">
                  <h6 class="media-heading text-muted">The sweet life</h6></a>
                <time datetime="2015-11-10T20:27:48+07:00" class="fs-11">November 10, 2015</time>
              </div>
            </li>
            <li class="media">
              <div class="media-left"><a href="#" class="inline-block"><img src="build/images/posts/04.jpg" alt="" class="media-object mo-lg"></a></div>
              <div class="media-body media-middle"><a href="#">
                  <h6 class="media-heading text-muted">Enjoy the moment</h6></a>
                <time datetime="2015-12-10T20:27:48+07:00" class="fs-11">December 10, 2015</time>
              </div>
            </li>
          </ul>
        </div>
        <div id="email" role="tabpanel" class="tab-pane fade">
          <button type="button" data-toggle="modal" data-target=".compose-mail-modal" class="btn btn-raised btn-block btn-danger mt-10"><i class="ti-pencil-alt"></i> Compose Mail</button>
          <ul class="list-unstyled navigation mb-0">
            <li class="header">Email</li>
            <li><a href="mailbox.html" class="bubble"><i class="ti-archive"></i> Inbox<span class="badge bg-danger">5</span></a></li>
            <li><a href="mailbox.html"><i class="ti-location-arrow"></i> Sent</a></li>
            <li><a href="mailbox.html"><i class="ti-notepad"></i> Draft</a></li>
            <li><a href="mailbox.html"><i class="ti-trash"></i> Trash</a></li>
            <li><a href="mailbox.html"><i class="ti-flag-alt"></i> Important</a></li>
            <li><a href="mailbox.html"><i class="ti-star"></i> Starred</a></li>
            <li class="header">Folders</li>
            <li><a href="#"><i class="ti-folder"></i> Newsletter</a></li>
            <li><a href="#"><i class="ti-folder"></i> Friend</a></li>
            <li><a href="#"><i class="ti-folder"></i> Company</a></li>
            <li><a href="#"><i class="ti-folder"></i> Downloaded</a></li>
          </ul>
        </div>
        <div id="setting" role="tabpanel" class="tab-pane fade">
          <div class="header">General Settings</div>
          <form class="form-horizontal">
            <div class="clearfix">
              <h6 class="pull-left fs-13">Maintenance Mode</h6>
              <div class="switch pull-right">
                <input id="setting-1" type="checkbox" checked="">
                <label for="setting-1" class="switch-success"></label>
              </div>
            </div>
            <p class="fs-12">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <div class="clearfix">
              <h6 class="pull-left fs-13">Location Services</h6>
              <div class="switch pull-right">
                <input id="setting-2" type="checkbox" checked="">
                <label for="setting-2" class="switch-success"></label>
              </div>
            </div>
            <p class="fs-12">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <div class="clearfix">
              <h6 class="pull-left fs-13">Display Errors</h6>
              <div class="switch pull-right">
                <input id="setting-3" type="checkbox" checked="">
                <label for="setting-3" class="switch-success"></label>
              </div>
            </div>
            <p class="fs-12">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <div class="clearfix">
              <h6 class="pull-left fs-13">Use SEO URLs</h6>
              <div class="switch pull-right">
                <input id="setting-4" type="checkbox" checked="">
                <label for="setting-4" class="switch-success"></label>
              </div>
            </div>
            <p class="fs-12">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <div class="clearfix">
              <h6 class="pull-left fs-13">Enable History</h6>
              <div class="switch pull-right">
                <input id="setting-5" type="checkbox" checked="">
                <label for="setting-5" class="switch-success"></label>
              </div>
            </div>
            <p class="fs-12">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          </form>
        </div>
      </div>
    </aside>
    <!-- Main Sidebar end-->
    <!-- Header start-->
    <header>
      <div class="search-bar closed">
        <form>
          <div class="input-group input-group-lg">
            <input type="text" placeholder="Search for..." class="form-control"><span class="input-group-btn">
              <button type="button" class="btn btn-default search-bar-toggle"><i class="ti-close"></i></button></span>
          </div>
        </form>
      </div>
      <div class="brand pull-left"><a href="index.html" class="logo"><i class="ti-underline"></i>
          <h2>MEGA<span>app</span></h2></a></div><a href="javascript:;" role="button" class="sidebar-toggle pull-left icon"><i class="ti-menu text-muted"></i></a>
      <form class="mt-15 mb-15 pull-left hidden-xs hidden-sm">
        <div class="form-group has-feedback mb-0">
          <input type="text" aria-describedby="inputSearchFor" placeholder="Search for..." class="form-control rounded"><span aria-hidden="true" class="ti-search form-control-feedback"></span><span id="inputSearchFor" class="sr-only">(default)</span>
        </div>
      </form>
      <ul class="newsticker list-unstyled ml-15 mb-0 pull-left visible-lg">
        <li class="fw-500">You <span class="text-danger">recommended</span> Karen Ortega.</li>
        <li class="fw-500">You <span class="text-info">followed</span> Olivia Williamson.</li>
        <li class="fw-500">New product <span class="text-success">Microsoft Lumia 950XL</span></li>
        <li class="fw-500">New order <span class="text-success">#021930217965</span></li>
      </ul>
      <ul class="notification-bar list-inline pull-right">
        <li class="visible-xs visible-sm"><a href="javascript:;" role="button" class="icon search-bar-toggle"><i class="ti-search text-muted"></i></a></li>
        <li class="hidden-xs"><a href="javascript:;" role="button" class="icon fullscreen-toggle"><i class="ti-fullscreen text-muted"></i></a></li>
        <li class="dropdown"><a id="dropdownMenu1" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle bubble icon"><i class="ti-save text-muted"></i><span class="badge bg-danger">3</span></a>
          <div aria-labelledby="dropdownMenu1" class="dropdown-menu dropdown-menu-right dm-medium fs-12 animated fadeInDown">
            <h5 class="dropdown-header">You have 3 file downloads</h5>
            <ul class="media-list">
              <li class="media"><a href="javascript:;">
                  <div class="media-left"><i class="ti-music-alt media-object mo-sm img-circle bg-info text-center"></i></div>
                  <div class="media-body">
                    <h6 class="media-heading">Music.mp3</h6>
                    <div class="progress progress-xs mb-5">
                      <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" class="progress-bar progress-bar-info"><span class="sr-only">60% Complete</span></div>
                    </div>
                    <p class="text-muted mb-0">1.3 of 4MB - 685KB/sec - 4 sec</p>
                  </div></a></li>
              <li class="media"><a href="javascript:;">
                  <div class="media-left"><i class="ti-video-clapper media-object mo-sm img-circle bg-danger text-center"></i></div>
                  <div class="media-body">
                    <h6 class="media-heading">Video.mp4</h6>
                    <div class="progress progress-xs mb-5">
                      <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" class="progress-bar progress-bar-success"><span class="sr-only">100% Complete</span></div>
                    </div>
                    <p class="text-muted mb-0">Completed - 5 minutes ago</p>
                  </div></a></li>
              <li class="media"><a href="javascript:;">
                  <div class="media-left"><i class="ti-zip media-object mo-sm img-circle bg-warning text-center"></i></div>
                  <div class="media-body">
                    <h6 class="media-heading">Copy.zip</h6>
                    <div class="progress progress-xs mb-5">
                      <div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;" class="progress-bar"><span class="sr-only">45% Complete</span></div>
                    </div>
                    <p class="text-muted mb-0">650 of 1451MB - 721KB/sec - 20 min</p>
                  </div></a></li>
            </ul>
            <div class="dropdown-footer text-center p-10"><a href="javascript:;" class="fw-500 text-muted">See all file downloads</a></div>
          </div>
        </li>
        <li class="dropdown"><a id="dropdownMenu2" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle bubble icon"><i class="ti-world text-muted"></i><span class="badge bg-danger">4</span></a>
          <div aria-labelledby="dropdownMenu2" class="dropdown-menu dropdown-menu-right dm-medium fs-12 animated fadeInDown">
            <h5 class="dropdown-header">You have 4 notifications</h5>
            <ul class="media-list">
              <li class="media"><a href="javascript:;">
                  <div class="media-left avatar"><img src="build/images/users/02.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
                  <div class="media-body">
                    <h6 class="media-heading">Mark Barnett</h6>
                    <p class="text-muted mb-0">Sent you a new message</p>
                  </div>
                  <div class="media-right text-nowrap">
                    <time datetime="2015-12-10T20:50:48+07:00" class="fs-11">9 mins</time>
                  </div></a></li>
              <li class="media"><a href="javascript:;">
                  <div class="media-left avatar"><img src="build/images/users/11.jpg" alt="" class="media-object img-circle"><span class="status bg-danger"></span></div>
                  <div class="media-body">
                    <h6 class="media-heading">Alexander Gilbert</h6>
                    <p class="text-muted mb-0">Sent you a new email</p>
                  </div>
                  <div class="media-right text-nowrap">
                    <time datetime="2015-12-10T20:42:40+07:00" class="fs-11">15 mins</time>
                  </div></a></li>
              <li class="media"><a href="javascript:;">
                  <div class="media-left avatar"><img src="build/images/users/12.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
                  <div class="media-body">
                    <h6 class="media-heading">Amanda Collins</h6>
                    <p class="text-muted mb-0">You have 8 unread messages</p>
                  </div>
                  <div class="media-right text-nowrap">
                    <time datetime="2015-12-10T20:35:35+07:00" class="fs-11">22 mins</time>
                  </div></a></li>
              <li class="media"><a href="javascript:;">
                  <div class="media-left avatar"><img src="build/images/users/13.jpg" alt="" class="media-object img-circle"><span class="status bg-warning"></span></div>
                  <div class="media-body">
                    <h6 class="media-heading">Christian Lane</h6>
                    <p class="text-muted mb-0">Commented on your post</p>
                  </div>
                  <div class="media-right text-nowrap">
                    <time datetime="2015-12-10T20:27:48+07:00" class="fs-11">30 mins</time>
                  </div></a></li>
            </ul>
            <div class="dropdown-footer text-center p-10"><a href="javascript:;" class="fw-500 text-muted">See all notifications</a></div>
          </div>
        </li>
        <li><a href="javascript:;" role="button" class="right-sidebar-toggle bubble icon"><i class="ti-comment-alt text-muted"></i><span class="dot bg-danger"></span></a></li>
        <li><a href="login.html" role="button" class="icon"><i class="ti-power-off text-muted"></i></a></li>
      </ul>
    </header>
    <!-- Header end-->
    <!-- Work Here start-->
    <section class="wrapper">
      <div class="page-header clearfix">
        <div class="pull-left">
          <h4 class="mt-0 mb-5">Documentation</h4>
          <ol class="breadcrumb mb-0">
            <li><a href="#">Umega</a></li>
            <li class="active">Documentation</li>
          </ol>
        </div>
        <div class="pull-right">
          <div class="btn-group">
            <button type="button" class="btn btn-default btn-outline">Language</button>
            <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-default btn-outline dropdown-toggle"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
            <ul style="min-width: 115px" class="dropdown-menu dropdown-menu-right animated fadeInDown">
              <li><a href="#">English</a></li>
              <li><a href="#">French</a></li>
              <li><a href="#">Chinese</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="main-content container-fluid p-0">
        <div class="row row-0">
          <div class="col-lg-12">
            <div class="clearfix p-25 bg-demo">
              <div class="pull-left">
                <h1>Umega App<span class="fs-20"> v1.0</span></h1>
                <p class="lead">Responsive Web App Kit</p>
              </div>
              <blockquote class="pull-right mb-0">
                <p>created: Mar 22, 2016</p>
                <p>by: LeThemes</p>
                <p>web: <a href="http://www.lethemes.net/" target="_blank">lethemes.net</a></p>
                <p>email: <a href="mailto:lethemes@gmail.com">lethemes@gmail.com</a></p>
              </blockquote>
            </div>
            <div class="p-25">
              <h2>Overview</h2>
              <p class="lead">Umega is a fully responsive admin dashboard template, easy customization and lightweight which is basically designed for the developers. It follows the best practices using the latest technologies and I really hope that you will enjoy working with it.</p>
              <h2>Features</h2>
              <ul>
                <li>Clean and simple</li>
                <li>Powerful layouts</li>
                <li>Valid HTML5 and CSS3</li>
                <li>Built with bootstrap 3.3.6</li>
                <li>Uses LESS, Jade, Gulp, Browser Sync, Bower, Git</li>
                <li>Easy to understand HTML Structure, CSS Classes & Javascript markup</li>
                <li>Fully responsive design, supported for desktops, laptops, smartphones and tablets</li>
                <li>and much more…</li>
              </ul>
              <h2>Changelog</h2>
              <blockquote>
                <p>1.0 - Mar 22, 2016</p>
                <footer>Initial Release</footer>
              </blockquote>
              <h2>Install</h2>
              <ol>
                <li><a href="https://nodejs.org/en/download" target="_blank">Install Node.js</a></li>
                <li><a href="https://git-scm.com" target="_blank">Install Git</a></li>
                <li>Run<code>npm install -g bower gulp-cli</code></li>
                <li>Run<code>gulp</code>to start server</li>
              </ol>
              <p>We have defined all the task by default. Gulp will compile less, js and jade files. You can modify or add your task in <code>gulpfile.js</code></p>
              <p>Commands list:</p>
              <ul>
                <li><strong>gulp:</strong> start server</li>
                <li><strong>gulp jade:</strong> complied jade file and beautify them</li>
                <li><strong>gulp less:</strong> complied less file and minify them</li>
                <li><strong>gulp compress-js:</strong> minify js file</li>
                <li><strong>gulp compress-images:</strong> compress image files</li>
              </ul>
              <h2>Folder Structure</h2>
              <pre>Umega/
  |-- assets/
  |   |-- data/
  |   |-- images/
  |   |   |-- backgrounds/
  |   |   |-- demo/
  |   |   |-- icons/
  |   |   |-- posts/
  |   |   |-- retina/
  |   |   |-- users/
  |   |   |-- zoom/
  |   |-- jade/
  |   |   |-- config/
  |   |   |-- template/
  |   |-- js/
  |   |   |-- pages/
  |   |-- less/
  |   |   |-- bootstrap/
  |-- build/
  |   |-- css/
  |   |-- images/
  |   |   |-- backgrounds/
  |   |   |-- demo/
  |   |   |-- icons/
  |   |   |-- posts/
  |   |   |-- retina/
  |   |   |-- users/
  |   |   |-- zoom/
  |   |-- js/
  |   |   |-- pages/
  |-- node_modules/
  |   |-- .bin/
  |   |-- browser-sync/
  |   |-- gulp/
  |   |-- gulp-imagemin/
  |   |-- gulp-jade/
  |   |-- gulp-less/
  |   |-- gulp-minify-css/
  |   |-- gulp-uglify/
  |-- plugins/
  |-- .bowerrc
  |-- bower.json
  |-- gulpfile.js
  |-- *.html</pre>
              <h2>HTML Structure</h2>
              <pre style="max-height: 500px" class="prettyprint linenums">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;Umega App - Blank Template&lt;/title&gt;
    &lt;!-- CSS Files--&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Main Sidebar start--&gt;
    &lt;aside class=&quot;main-sidebar pinned&quot;&gt;
    &lt;/aside&gt;
    &lt;!-- Main Sidebar end--&gt;
    &lt;!-- Header start--&gt;
    &lt;header&gt;
    &lt;/header&gt;
    &lt;!-- Header end--&gt;
    &lt;!-- Work Here start--&gt;
    &lt;section class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;page-header clearfix&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;main-content container-fluid&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-12&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;!-- Work Here end--&gt;
    &lt;!-- Right Sidebar start--&gt;
    &lt;aside class=&quot;right-sidebar closed&quot;&gt;
    &lt;/aside&gt;
    &lt;aside class=&quot;conversation closed&quot;&gt;
    &lt;/aside&gt;
    &lt;!-- Right Sidebar end--&gt;
    &lt;!-- Demo Settings start--&gt;
    &lt;div class=&quot;setting closed&quot;&gt;
    &lt;/div&gt;
    &lt;!-- Demo Settings end--&gt;
    &lt;!-- JS Files--&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
              <h3>Main Sidebar</h3>
              <pre style="max-height: 500px" class="prettyprint linenums">&lt;!-- Main Sidebar start--&gt;
&lt;aside class=&quot;main-sidebar pinned&quot;&gt;
  &lt;div class=&quot;brand&quot;&gt;
    &lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;
      &lt;i class=&quot;ti-underline&quot;&gt;&lt;/i&gt;
      &lt;h2&gt;MEGA&lt;span&gt;app&lt;/span&gt;&lt;/h2&gt;
    &lt;/a&gt;
    &lt;a href=&quot;javascript:;&quot; role=&quot;button&quot; class=&quot;sidebar-toggle visible-xs-block&quot;&gt;&lt;i class=&quot;ti-close text-white&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;profile&quot;&gt;
    &lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;avatar img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;
    &lt;h5 class=&quot;text-white mb-5&quot;&gt;Matthew Gonzalez&lt;/h5&gt;
    &lt;div class=&quot;text-muted&quot;&gt;Designer&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Nav tabs--&gt;
  &lt;ul role=&quot;tablist&quot; class=&quot;nav nav-tabs nav-justified nav-sidebar&quot;&gt;
    &lt;li role=&quot;presentation&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;#menu&quot; aria-controls=&quot;menu&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;ti-menu&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#portfolio&quot; aria-controls=&quot;portfolio&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;ti-user&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li role=&quot;presentation&quot; class=&quot;bubble&quot;&gt;&lt;a href=&quot;#email&quot; aria-controls=&quot;email&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;ti-email&quot;&gt;&lt;span class=&quot;dot bg-danger&quot;&gt;&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#setting&quot; aria-controls=&quot;setting&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;ti-server&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- Tab panes--&gt;
  &lt;div class=&quot;tab-content nav-sidebar-content&quot;&gt;
    &lt;div id=&quot;menu&quot; role=&quot;tabpanel&quot; class=&quot;tab-pane fade in active&quot;&gt;
      &lt;ul class=&quot;list-unstyled navigation mb-0&quot;&gt;
        &lt;li class=&quot;header&quot;&gt;Main&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot; class=&quot;active bubble&quot;&gt;&lt;i class=&quot;ti-home&quot;&gt;&lt;/i&gt; Dashboard&lt;span class=&quot;badge bg-danger&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse2&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse2&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-palette&quot;&gt;&lt;/i&gt; Skins&lt;/a&gt;
          &lt;ul id=&quot;collapse2&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;red-skin.html&quot;&gt;Red&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;green-skin.html&quot;&gt;Green&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;yellow-skin.html&quot;&gt;Yellow&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;header&quot;&gt;Components&lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse3&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse3&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-receipt&quot;&gt;&lt;/i&gt; Basic&lt;/a&gt;
          &lt;ul id=&quot;collapse3&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;buttons.html&quot;&gt;Buttons&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;carousels.html&quot;&gt;Carousels&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;containers.html&quot;&gt;Containers&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;dialogs.html&quot;&gt;Dialogs&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;basic-inputs.html&quot;&gt;Inputs&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;navigations.html&quot;&gt;Navigations&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;progress-bars.html&quot;&gt;Progress bars&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;typography.html&quot;&gt;Typography&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse4&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse4&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-ruler-pencil&quot;&gt;&lt;/i&gt; Editors&lt;/a&gt;
          &lt;ul id=&quot;collapse4&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;summernote.html&quot;&gt;Summernote&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;bootstrap-markdown.html&quot;&gt;Bootstrap markdown&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;code-prettify.html&quot;&gt;Code prettify&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;ckeditor.html&quot;&gt;CKEditor&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse5&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse5&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-location-arrow&quot;&gt;&lt;/i&gt; Pickers&lt;/a&gt;
          &lt;ul id=&quot;collapse5&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;color-picker.html&quot;&gt;Color picker&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;datetime-picker.html&quot;&gt;Datetime picker&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;clock-picker.html&quot;&gt;Clock picker&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;date-range-picker.html&quot;&gt;Date range picker&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;multi-select.html&quot;&gt;Multi select&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse6&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse6&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-layers-alt&quot;&gt;&lt;/i&gt; Forms&lt;/a&gt;
          &lt;ul id=&quot;collapse6&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;form-layouts.html&quot;&gt;Layouts&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;jquery-validation.html&quot;&gt;Validation&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;jquery-steps.html&quot;&gt;Wizard&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;other-plugins.html&quot;&gt;Other plugins&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse7&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse7&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-face-smile&quot;&gt;&lt;/i&gt; Icons&lt;/a&gt;
          &lt;ul id=&quot;collapse7&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;glyphicons.html&quot;&gt;Glyphicons&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;font-awesome.html&quot;&gt;Font awesome&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;material-design.html&quot;&gt;Material design&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;themify.html&quot;&gt;Themify&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse8&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse8&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-layout-grid2&quot;&gt;&lt;/i&gt; Tables&lt;/a&gt;
          &lt;ul id=&quot;collapse8&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;basic-tables.html&quot;&gt;Basic tables&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;data-tables.html&quot;&gt;Data tables&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;pricing-tables.html&quot;&gt;Pricing tables&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse9&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse9&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-control-forward&quot;&gt;&lt;/i&gt; Animations&lt;/a&gt;
          &lt;ul id=&quot;collapse9&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;basic-animations.html&quot;&gt;Basic&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;loading-animations.html&quot;&gt;Loading&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse10&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse10&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-upload&quot;&gt;&lt;/i&gt; File uploads&lt;/a&gt;
          &lt;ul id=&quot;collapse10&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;dropzone-js.html&quot;&gt;Dropzone&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;bootstrap-file-input.html&quot;&gt;Bootstrap file input&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse11&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse11&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-info-alt&quot;&gt;&lt;/i&gt; Indicators&lt;/a&gt;
          &lt;ul id=&quot;collapse11&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;toastr.html&quot;&gt;Toastr&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;sweet-alert.html&quot;&gt;Sweet alert&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;header&quot;&gt;Data visualization&lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse12&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse12&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-bar-chart&quot;&gt;&lt;/i&gt; Charts&lt;/a&gt;
          &lt;ul id=&quot;collapse12&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;flot-charts.html&quot;&gt;Flot charts&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;morris-charts.html&quot;&gt;Morris charts&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;chart-js.html&quot;&gt;Chart.js&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;other-charts.html&quot;&gt;Other charts&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse13&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse13&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-location-pin&quot;&gt;&lt;/i&gt; Maps&lt;/a&gt;
          &lt;ul id=&quot;collapse13&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;vector-maps.html&quot;&gt;Vector maps&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;google-maps.html&quot;&gt;Google maps&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;header&quot;&gt;Page kits&lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse14&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse14&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-alert&quot;&gt;&lt;/i&gt; Error pages&lt;/a&gt;
          &lt;ul id=&quot;collapse14&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;400.html&quot;&gt;400 Bad request&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;401.html&quot;&gt;401 Unauthorized&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;403.html&quot;&gt;403 Forbidden&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;404.html&quot;&gt;404 Not found&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;500.html&quot;&gt;500 Internal server error&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;503.html&quot;&gt;503 Service unavailable&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse15&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse15&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-user&quot;&gt;&lt;/i&gt; User pages&lt;/a&gt;
          &lt;ul id=&quot;collapse15&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;login.html&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;register.html&quot;&gt;Registration&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;forgot.html&quot;&gt;Forgot password&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;lock-screen.html&quot;&gt;Lock screen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;profile.html&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse16&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse16&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-panel&quot;&gt;&lt;/i&gt; Apps&lt;/a&gt;
          &lt;ul id=&quot;collapse16&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;mailbox.html&quot;&gt;Mailbox&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;calendar.html&quot;&gt;Calendar&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;image-cropper.html&quot;&gt;Image cropper&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;chat-dashboad.html&quot;&gt;Chat dashboard&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse17&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse17&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-blackboard&quot;&gt;&lt;/i&gt; Extra pages&lt;/a&gt;
          &lt;ul id=&quot;collapse17&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;invoice.html&quot;&gt;Invoice&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;search-results.html&quot;&gt;Search results&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;blank-template.html&quot;&gt;Blank template&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;header&quot;&gt;Help&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;documentation.html&quot;&gt;&lt;i class=&quot;ti-help-alt&quot;&gt;&lt;/i&gt; Documentation&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;header&quot;&gt;Menu Levels&lt;/li&gt;
        &lt;li class=&quot;panel&quot;&gt;
          &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;.navigation&quot; href=&quot;#collapse18&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse18&quot; class=&quot;collapsed&quot;&gt;&lt;i class=&quot;ti-folder&quot;&gt;&lt;/i&gt; Menu levels&lt;/a&gt;
          &lt;ul id=&quot;collapse18&quot; class=&quot;list-unstyled collapse&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu level 2.1&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;panel&quot;&gt;
              &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#collapse18&quot; href=&quot;#collapse21&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse21&quot; class=&quot;collapsed&quot;&gt;Menu level 2.2&lt;/a&gt;
              &lt;ul id=&quot;collapse21&quot; class=&quot;list-unstyled collapse&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu level 3.1&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;panel&quot;&gt;
                  &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#collapse21&quot; href=&quot;#collapse31&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse31&quot; class=&quot;collapsed&quot;&gt;Menu level 3.2&lt;/a&gt;
                  &lt;ul id=&quot;collapse31&quot; class=&quot;list-unstyled collapse&quot;&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu level 4.1&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&quot;panel&quot;&gt;
                      &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#collapse31&quot; href=&quot;#collapse41&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse41&quot; class=&quot;collapsed&quot;&gt;Menu level 4.2&lt;/a&gt;
                      &lt;ul id=&quot;collapse41&quot; class=&quot;list-unstyled collapse&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu level 5.1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu level 5.2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;header&quot;&gt;Server Status&lt;/div&gt;
      &lt;ul class=&quot;list-unstyled pl-15 pr-15&quot;&gt;
        &lt;li class=&quot;mb-20&quot;&gt;
          &lt;div class=&quot;block clearfix mb-10&quot;&gt;&lt;span class=&quot;pull-left fs-12 text-muted&quot;&gt;CPU Used&lt;/span&gt;&lt;span class=&quot;pull-right label label-outline label-warning&quot;&gt;65%&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;progress progress-xs mb-0&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;65&quot; class=&quot;progress-bar progress-bar-warning&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;mb-20&quot;&gt;
          &lt;div class=&quot;block clearfix mb-10&quot;&gt;&lt;span class=&quot;pull-left fs-12 text-muted&quot;&gt;Bandwidth&lt;/span&gt;&lt;span class=&quot;pull-right label label-outline label-danger&quot;&gt;80%&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;progress progress-xs mb-0&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;80&quot; class=&quot;progress-bar progress-bar-danger&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id=&quot;portfolio&quot; role=&quot;tabpanel&quot; class=&quot;tab-pane fade&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;Rating&lt;/div&gt;
      &lt;div class=&quot;rating clearfix&quot;&gt;
        &lt;div class=&quot;pull-left score bg-black fs-24 fw-600 text-center&quot;&gt;4.2&lt;/div&gt;
        &lt;div class=&quot;pull-left&quot;&gt;
          &lt;div class=&quot;progress&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;100&quot; class=&quot;progress-bar five-star&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;80&quot; class=&quot;progress-bar four-star&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;10&quot; class=&quot;progress-bar three-star&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;25&quot; class=&quot;progress-bar two-star&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress&quot;&gt;
            &lt;div role=&quot;progressbar&quot; data-transitiongoal=&quot;5&quot; class=&quot;progress-bar one-star&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;p class=&quot;text-center fs-12 mt-5 mb-0&quot;&gt;average based on 1,056 ratings&lt;/p&gt;
      &lt;div class=&quot;header&quot;&gt;Followers&lt;/div&gt;
      &lt;div class=&quot;followers&quot;&gt;&lt;img src=&quot;build/images/users/02.jpg&quot; alt=&quot;&quot; class=&quot;img-circle&quot;&gt;&lt;img src=&quot;build/images/users/03.jpg&quot; alt=&quot;&quot; class=&quot;img-circle&quot;&gt;&lt;img src=&quot;build/images/users/10.jpg&quot; alt=&quot;&quot; class=&quot;img-circle&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;more img-circle text-center fs-24 fw-600 text-info&quot;&gt;+&lt;/a&gt;&lt;/div&gt;
      &lt;p class=&quot;text-center fs-12 mt-5 mb-0&quot;&gt;2,590 followers and 8,320 sales&lt;/p&gt;
      &lt;div class=&quot;header&quot;&gt;Visitors&lt;/div&gt;
      &lt;div id=&quot;sp-visitors&quot;&gt;&lt;/div&gt;
      &lt;p class=&quot;text-center fs-12 mt-5 mb-0&quot;&gt;3,320 visitors in last 10 days&lt;/p&gt;
      &lt;div class=&quot;header&quot;&gt;Revenue&lt;/div&gt;
      &lt;div id=&quot;sp-revenue&quot;&gt;&lt;/div&gt;
      &lt;p class=&quot;text-center fs-12 mt-5 mb-0&quot;&gt;8.59k revenue estimate in last 10 days&lt;/p&gt;
      &lt;div class=&quot;header&quot;&gt;Your New Blog Posts&lt;/div&gt;
      &lt;ul class=&quot;posts media-list&quot;&gt;
        &lt;li class=&quot;media&quot;&gt;
          &lt;div class=&quot;media-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;&lt;img src=&quot;build/images/posts/01.jpg&quot; alt=&quot;&quot; class=&quot;media-object mo-lg&quot;&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;media-body media-middle&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              &lt;h6 class=&quot;media-heading text-muted&quot;&gt;The first chapter&lt;/h6&gt;
            &lt;/a&gt;
            &lt;time datetime=&quot;2015-09-14T14:28:26+07:00&quot; class=&quot;fs-11&quot;&gt;September 14, 2015&lt;/time&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;media&quot;&gt;
          &lt;div class=&quot;media-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;&lt;img src=&quot;build/images/posts/02.jpg&quot; alt=&quot;&quot; class=&quot;media-object mo-lg&quot;&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;media-body media-middle&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              &lt;h6 class=&quot;media-heading text-muted&quot;&gt;A simple image post&lt;/h6&gt;
            &lt;/a&gt;
            &lt;time datetime=&quot;2015-10-10T20:27:48+07:00&quot; class=&quot;fs-11&quot;&gt;October 10, 2015&lt;/time&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;media&quot;&gt;
          &lt;div class=&quot;media-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;&lt;img src=&quot;build/images/posts/03.jpg&quot; alt=&quot;&quot; class=&quot;media-object mo-lg&quot;&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;media-body media-middle&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              &lt;h6 class=&quot;media-heading text-muted&quot;&gt;The sweet life&lt;/h6&gt;
            &lt;/a&gt;
            &lt;time datetime=&quot;2015-11-10T20:27:48+07:00&quot; class=&quot;fs-11&quot;&gt;November 10, 2015&lt;/time&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;media&quot;&gt;
          &lt;div class=&quot;media-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;&lt;img src=&quot;build/images/posts/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object mo-lg&quot;&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;media-body media-middle&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              &lt;h6 class=&quot;media-heading text-muted&quot;&gt;Enjoy the moment&lt;/h6&gt;
            &lt;/a&gt;
            &lt;time datetime=&quot;2015-12-10T20:27:48+07:00&quot; class=&quot;fs-11&quot;&gt;December 10, 2015&lt;/time&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id=&quot;email&quot; role=&quot;tabpanel&quot; class=&quot;tab-pane fade&quot;&gt;
      &lt;button type=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;.compose-mail-modal&quot; class=&quot;btn btn-raised btn-block btn-danger mt-10&quot;&gt;&lt;i class=&quot;ti-pencil-alt&quot;&gt;&lt;/i&gt; Compose Mail&lt;/button&gt;
      &lt;ul class=&quot;list-unstyled navigation mb-0&quot;&gt;
        &lt;li class=&quot;header&quot;&gt;Email&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;mailbox.html&quot; class=&quot;bubble&quot;&gt;&lt;i class=&quot;ti-archive&quot;&gt;&lt;/i&gt; Inbox&lt;span class=&quot;badge bg-danger&quot;&gt;5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;mailbox.html&quot;&gt;&lt;i class=&quot;ti-location-arrow&quot;&gt;&lt;/i&gt; Sent&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;mailbox.html&quot;&gt;&lt;i class=&quot;ti-notepad&quot;&gt;&lt;/i&gt; Draft&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;mailbox.html&quot;&gt;&lt;i class=&quot;ti-trash&quot;&gt;&lt;/i&gt; Trash&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;mailbox.html&quot;&gt;&lt;i class=&quot;ti-flag-alt&quot;&gt;&lt;/i&gt; Important&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;mailbox.html&quot;&gt;&lt;i class=&quot;ti-star&quot;&gt;&lt;/i&gt; Starred&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;header&quot;&gt;Folders&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;ti-folder&quot;&gt;&lt;/i&gt; Newsletter&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;ti-folder&quot;&gt;&lt;/i&gt; Friend&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;ti-folder&quot;&gt;&lt;/i&gt; Company&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;ti-folder&quot;&gt;&lt;/i&gt; Downloaded&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id=&quot;setting&quot; role=&quot;tabpanel&quot; class=&quot;tab-pane fade&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;General Settings&lt;/div&gt;
      &lt;form class=&quot;form-horizontal&quot;&gt;
        &lt;div class=&quot;clearfix&quot;&gt;
          &lt;h6 class=&quot;pull-left fs-13&quot;&gt;Maintenance Mode&lt;/h6&gt;
          &lt;div class=&quot;switch pull-right&quot;&gt;
            &lt;input id=&quot;setting-1&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
            &lt;label for=&quot;setting-1&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p class=&quot;fs-12&quot;&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.&lt;/p&gt;
        &lt;div class=&quot;clearfix&quot;&gt;
          &lt;h6 class=&quot;pull-left fs-13&quot;&gt;Location Services&lt;/h6&gt;
          &lt;div class=&quot;switch pull-right&quot;&gt;
            &lt;input id=&quot;setting-2&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
            &lt;label for=&quot;setting-2&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p class=&quot;fs-12&quot;&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.&lt;/p&gt;
        &lt;div class=&quot;clearfix&quot;&gt;
          &lt;h6 class=&quot;pull-left fs-13&quot;&gt;Display Errors&lt;/h6&gt;
          &lt;div class=&quot;switch pull-right&quot;&gt;
            &lt;input id=&quot;setting-3&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
            &lt;label for=&quot;setting-3&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p class=&quot;fs-12&quot;&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.&lt;/p&gt;
        &lt;div class=&quot;clearfix&quot;&gt;
          &lt;h6 class=&quot;pull-left fs-13&quot;&gt;Use SEO URLs&lt;/h6&gt;
          &lt;div class=&quot;switch pull-right&quot;&gt;
            &lt;input id=&quot;setting-4&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
            &lt;label for=&quot;setting-4&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p class=&quot;fs-12&quot;&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.&lt;/p&gt;
        &lt;div class=&quot;clearfix&quot;&gt;
          &lt;h6 class=&quot;pull-left fs-13&quot;&gt;Enable History&lt;/h6&gt;
          &lt;div class=&quot;switch pull-right&quot;&gt;
            &lt;input id=&quot;setting-5&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
            &lt;label for=&quot;setting-5&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p class=&quot;fs-12&quot;&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.&lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/aside&gt;
&lt;!-- Main Sidebar end--&gt;</pre>
              <h3>Header</h3>
              <pre style="max-height: 500px" class="prettyprint linenums">&lt;!-- Header start--&gt;
&lt;header&gt;
  &lt;div class=&quot;search-bar closed&quot;&gt;
    &lt;form&gt;
      &lt;div class=&quot;input-group input-group-lg&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Search for...&quot; class=&quot;form-control&quot;&gt;&lt;span class=&quot;input-group-btn&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default search-bar-toggle&quot;&gt;&lt;i class=&quot;ti-close&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class=&quot;brand pull-left&quot;&gt;
    &lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;
      &lt;i class=&quot;ti-underline&quot;&gt;&lt;/i&gt;
      &lt;h2&gt;MEGA&lt;span&gt;app&lt;/span&gt;&lt;/h2&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;a href=&quot;javascript:;&quot; role=&quot;button&quot; class=&quot;sidebar-toggle pull-left icon&quot;&gt;&lt;i class=&quot;ti-menu text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;form class=&quot;mt-15 mb-15 pull-left hidden-xs hidden-sm&quot;&gt;
    &lt;div class=&quot;form-group has-feedback mb-0&quot;&gt;
      &lt;input type=&quot;text&quot; aria-describedby=&quot;inputSearchFor&quot; placeholder=&quot;Search for...&quot; class=&quot;form-control rounded&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;ti-search form-control-feedback&quot;&gt;&lt;/span&gt;&lt;span id=&quot;inputSearchFor&quot; class=&quot;sr-only&quot;&gt;(default)&lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;ul class=&quot;newsticker list-unstyled ml-15 mb-0 pull-left visible-lg&quot;&gt;
    &lt;li class=&quot;fw-500&quot;&gt;You &lt;span class=&quot;text-danger&quot;&gt;recommended&lt;/span&gt; Karen Ortega.&lt;/li&gt;
    &lt;li class=&quot;fw-500&quot;&gt;You &lt;span class=&quot;text-info&quot;&gt;followed&lt;/span&gt; Olivia Williamson.&lt;/li&gt;
    &lt;li class=&quot;fw-500&quot;&gt;New product &lt;span class=&quot;text-success&quot;&gt;Microsoft Lumia 950XL&lt;/span&gt;&lt;/li&gt;
    &lt;li class=&quot;fw-500&quot;&gt;New order &lt;span class=&quot;text-success&quot;&gt;#021930217965&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class=&quot;notification-bar list-inline pull-right&quot;&gt;
    &lt;li class=&quot;visible-xs visible-sm&quot;&gt;&lt;a href=&quot;javascript:;&quot; role=&quot;button&quot; class=&quot;icon search-bar-toggle&quot;&gt;&lt;i class=&quot;ti-search text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;hidden-xs&quot;&gt;&lt;a href=&quot;javascript:;&quot; role=&quot;button&quot; class=&quot;icon fullscreen-toggle&quot;&gt;&lt;i class=&quot;ti-fullscreen text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;dropdown&quot;&gt;
      &lt;a id=&quot;dropdownMenu1&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle bubble icon&quot;&gt;&lt;i class=&quot;ti-save text-muted&quot;&gt;&lt;/i&gt;&lt;span class=&quot;badge bg-danger&quot;&gt;3&lt;/span&gt;&lt;/a&gt;
      &lt;div aria-labelledby=&quot;dropdownMenu1&quot; class=&quot;dropdown-menu dropdown-menu-right dm-medium fs-12 animated fadeInDown&quot;&gt;
        &lt;h5 class=&quot;dropdown-header&quot;&gt;You have 3 file downloads&lt;/h5&gt;
        &lt;ul class=&quot;media-list&quot;&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left&quot;&gt;&lt;i class=&quot;ti-music-alt media-object mo-sm img-circle bg-info text-center&quot;&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Music.mp3&lt;/h6&gt;
                &lt;div class=&quot;progress progress-xs mb-5&quot;&gt;
                  &lt;div role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot; class=&quot;progress-bar progress-bar-info&quot;&gt;&lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;1.3 of 4MB - 685KB/sec - 4 sec&lt;/p&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left&quot;&gt;&lt;i class=&quot;ti-video-clapper media-object mo-sm img-circle bg-danger text-center&quot;&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Video.mp4&lt;/h6&gt;
                &lt;div class=&quot;progress progress-xs mb-5&quot;&gt;
                  &lt;div role=&quot;progressbar&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 100%;&quot; class=&quot;progress-bar progress-bar-success&quot;&gt;&lt;span class=&quot;sr-only&quot;&gt;100% Complete&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;Completed - 5 minutes ago&lt;/p&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left&quot;&gt;&lt;i class=&quot;ti-zip media-object mo-sm img-circle bg-warning text-center&quot;&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Copy.zip&lt;/h6&gt;
                &lt;div class=&quot;progress progress-xs mb-5&quot;&gt;
                  &lt;div role=&quot;progressbar&quot; aria-valuenow=&quot;45&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 45%;&quot; class=&quot;progress-bar&quot;&gt;&lt;span class=&quot;sr-only&quot;&gt;45% Complete&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;650 of 1451MB - 721KB/sec - 20 min&lt;/p&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;dropdown-footer text-center p-10&quot;&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;fw-500 text-muted&quot;&gt;See all file downloads&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;dropdown&quot;&gt;
      &lt;a id=&quot;dropdownMenu2&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle bubble icon&quot;&gt;&lt;i class=&quot;ti-world text-muted&quot;&gt;&lt;/i&gt;&lt;span class=&quot;badge bg-danger&quot;&gt;4&lt;/span&gt;&lt;/a&gt;
      &lt;div aria-labelledby=&quot;dropdownMenu2&quot; class=&quot;dropdown-menu dropdown-menu-right dm-medium fs-12 animated fadeInDown&quot;&gt;
        &lt;h5 class=&quot;dropdown-header&quot;&gt;You have 4 notifications&lt;/h5&gt;
        &lt;ul class=&quot;media-list&quot;&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/02.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Mark Barnett&lt;/h6&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;Sent you a new message&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;media-right text-nowrap&quot;&gt;
                &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11&quot;&gt;9 mins&lt;/time&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/11.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-danger&quot;&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Alexander Gilbert&lt;/h6&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;Sent you a new email&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;media-right text-nowrap&quot;&gt;
                &lt;time datetime=&quot;2015-12-10T20:42:40+07:00&quot; class=&quot;fs-11&quot;&gt;15 mins&lt;/time&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/12.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Amanda Collins&lt;/h6&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;You have 8 unread messages&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;media-right text-nowrap&quot;&gt;
                &lt;time datetime=&quot;2015-12-10T20:35:35+07:00&quot; class=&quot;fs-11&quot;&gt;22 mins&lt;/time&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;media&quot;&gt;
            &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/13.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-warning&quot;&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class=&quot;media-body&quot;&gt;
                &lt;h6 class=&quot;media-heading&quot;&gt;Christian Lane&lt;/h6&gt;
                &lt;p class=&quot;text-muted mb-0&quot;&gt;Commented on your post&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;media-right text-nowrap&quot;&gt;
                &lt;time datetime=&quot;2015-12-10T20:27:48+07:00&quot; class=&quot;fs-11&quot;&gt;30 mins&lt;/time&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;dropdown-footer text-center p-10&quot;&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;fw-500 text-muted&quot;&gt;See all notifications&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;javascript:;&quot; role=&quot;button&quot; class=&quot;right-sidebar-toggle bubble icon&quot;&gt;&lt;i class=&quot;ti-comment-alt text-muted&quot;&gt;&lt;/i&gt;&lt;span class=&quot;dot bg-danger&quot;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;login.html&quot; role=&quot;button&quot; class=&quot;icon&quot;&gt;&lt;i class=&quot;ti-power-off text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/header&gt;
&lt;!-- Header end--&gt;</pre>
              <h3>Right Sidebar</h3>
              <pre style="max-height: 500px" class="prettyprint linenums">&lt;!-- Right Sidebar start--&gt;
&lt;aside class=&quot;right-sidebar closed&quot;&gt;
  &lt;a href=&quot;javascript:;&quot; role=&quot;button&quot; class=&quot;right-sidebar-toggle pull-right&quot;&gt;&lt;i class=&quot;ti-close text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;h4 id=&quot;chat-title&quot; class=&quot;text-center m-0 mb-20 fs-16&quot;&gt;Chat list&lt;/h4&gt;
  &lt;form id=&quot;chat-search&quot; class=&quot;mb-10&quot;&gt;
    &lt;div class=&quot;form-group has-feedback mb-0&quot;&gt;
      &lt;input type=&quot;text&quot; aria-describedby=&quot;inputChatSearch&quot; placeholder=&quot;Chat with...&quot; class=&quot;form-control rounded&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;ti-search form-control-feedback&quot;&gt;&lt;/span&gt;&lt;span id=&quot;inputChatSearch&quot; class=&quot;sr-only&quot;&gt;(default)&lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;ul class=&quot;chat-list mb-0 fs-12 media-list&quot;&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/20.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Jane Curtis&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;Where are you from?&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;media-right&quot;&gt;&lt;span class=&quot;badge bg-danger&quot;&gt;2&lt;/span&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/01.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Edward Garcia&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;Nice to meet you.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/02.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Bruce Olson&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;What do you want to do?&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/03.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-warning&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Martha Rodriguez&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;I&#39;m hungry.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;media-right&quot;&gt;&lt;span class=&quot;badge bg-danger&quot;&gt;1&lt;/span&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/05.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Hannah Williamson&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;Do you know the address?&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/06.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Anthony Mills&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;No problem.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/07.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-warning&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Ethan Stanley&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;Hello?&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/08.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Jonathan Castro&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;OK. Thanks.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;media-right&quot;&gt;&lt;span class=&quot;badge bg-danger&quot;&gt;1&lt;/span&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/09.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Denise Rose&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;Bye bye.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle&quot;&gt;
        &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/10.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-danger&quot;&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;media-body&quot;&gt;
          &lt;h6 class=&quot;media-heading&quot;&gt;Eugene Meyer&lt;/h6&gt;
          &lt;p class=&quot;text-muted mb-0&quot;&gt;How are you?&lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/aside&gt;
&lt;aside class=&quot;conversation closed&quot;&gt;
  &lt;a href=&quot;javascript:;&quot; class=&quot;conversation-toggle pull-left&quot;&gt;&lt;i class=&quot;ti-arrow-left text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;pull-right&quot;&gt;&lt;i class=&quot;ti-pencil text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;h5 id=&quot;chat-with&quot; class=&quot;text-center m-0 mb-20&quot;&gt;Edward Garcia&lt;/h5&gt;
  &lt;ul class=&quot;media-list chat-content fs-12&quot;&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Hello.&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted&quot;&gt;09:45 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media other&quot;&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Hi.&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted pull-right&quot;&gt;09:46 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
      &lt;div class=&quot;media-right avatar&quot;&gt;&lt;img src=&quot;build/images/users/18.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;How are you?&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted&quot;&gt;09:47 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media other&quot;&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;I&#39;m good. How are you?&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted pull-right&quot;&gt;09:50 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
      &lt;div class=&quot;media-right avatar&quot;&gt;&lt;img src=&quot;build/images/users/18.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Good. Do you speak English?&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted&quot;&gt;09:55 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media other&quot;&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;A little. Are you American?&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted pull-right&quot;&gt;09:56 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
      &lt;div class=&quot;media-right avatar&quot;&gt;&lt;img src=&quot;build/images/users/18.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Yes.&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted&quot;&gt;10:00 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media other&quot;&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Where are you from?&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted pull-right&quot;&gt;10:01 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
      &lt;div class=&quot;media-right avatar&quot;&gt;&lt;img src=&quot;build/images/users/18.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;I&#39;m from California.&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted&quot;&gt;10:03 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media other&quot;&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Nice to meet you.&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted pull-right&quot;&gt;10:04 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
      &lt;div class=&quot;media-right avatar&quot;&gt;&lt;img src=&quot;build/images/users/18.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;media&quot;&gt;
      &lt;div class=&quot;media-left avatar&quot;&gt;&lt;img src=&quot;build/images/users/04.jpg&quot; alt=&quot;&quot; class=&quot;media-object img-circle&quot;&gt;&lt;span class=&quot;status bg-success&quot;&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
        &lt;p&gt;Nice to meet you too.&lt;/p&gt;
        &lt;time datetime=&quot;2015-12-10T20:50:48+07:00&quot; class=&quot;fs-11 text-muted&quot;&gt;10:05 PM &lt;i class=&quot;ti-check text-success&quot;&gt;&lt;/i&gt;&lt;/time&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;form id=&quot;chat-input&quot;&gt;
    &lt;div class=&quot;form-group has-feedback mb-0&quot;&gt;
      &lt;input type=&quot;text&quot; aria-describedby=&quot;inputSendMessage&quot; placeholder=&quot;Sent a message&quot; class=&quot;form-control rounded&quot;&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;ti-pencil-alt form-control-feedback&quot;&gt;&lt;/span&gt;&lt;span id=&quot;inputSendMessage&quot; class=&quot;sr-only&quot;&gt;(default)&lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/aside&gt;
&lt;!-- Right Sidebar end--&gt;</pre>
              <h3>Demo Settings</h3>
              <pre style="max-height: 500px" class="prettyprint linenums">&lt;!-- Demo Settings start--&gt;
&lt;div class=&quot;setting closed&quot;&gt;
  &lt;a href=&quot;javascript:;&quot; class=&quot;setting-toggle fs-16&quot;&gt;&lt;i class=&quot;ti-settings text-muted&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;h4 class=&quot;fs-16 mt-0 mb-15&quot;&gt;Demo settings&lt;/h4&gt;
  &lt;form class=&quot;form-horizontal&quot;&gt;
    &lt;div class=&quot;clearfix&quot;&gt;
      &lt;h6 class=&quot;pull-left fs-13 fw-400&quot;&gt;Fixed Header&lt;/h6&gt;
      &lt;div class=&quot;switch pull-right&quot;&gt;
        &lt;input id=&quot;fixed-header&quot; type=&quot;checkbox&quot;&gt;
        &lt;label for=&quot;fixed-header&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;clearfix&quot;&gt;
      &lt;h6 class=&quot;pull-left fs-13 fw-400&quot;&gt;Fixed Sidebar&lt;/h6&gt;
      &lt;div class=&quot;switch pull-right&quot;&gt;
        &lt;input id=&quot;fixed-sidebar&quot; type=&quot;checkbox&quot;&gt;
        &lt;label for=&quot;fixed-sidebar&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;clearfix hidden-xs&quot;&gt;
      &lt;h6 class=&quot;pull-left fs-13 fw-400&quot;&gt;Pinned Sidebar&lt;/h6&gt;
      &lt;div class=&quot;switch pull-right&quot;&gt;
        &lt;input id=&quot;pinned-sidebar&quot; type=&quot;checkbox&quot;&gt;
        &lt;label for=&quot;pinned-sidebar&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;clearfix hidden-xs&quot;&gt;
      &lt;h6 class=&quot;pull-left fs-13 fw-400&quot;&gt;Closed Sidebar&lt;/h6&gt;
      &lt;div class=&quot;switch pull-right&quot;&gt;
        &lt;input id=&quot;closed-sidebar&quot; type=&quot;checkbox&quot;&gt;
        &lt;label for=&quot;closed-sidebar&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;clearfix&quot;&gt;
      &lt;h6 class=&quot;pull-left fs-13 fw-400&quot;&gt;Native Scrollbar&lt;/h6&gt;
      &lt;div class=&quot;switch pull-right&quot;&gt;
        &lt;input id=&quot;native-scrollbar&quot; type=&quot;checkbox&quot;&gt;
        &lt;label for=&quot;native-scrollbar&quot; class=&quot;switch-success&quot;&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;!-- Demo Settings end--&gt;</pre>
              <h2>CSS Helper</h2>
              <div role="tabpanel">
                <ul role="tablist" style="margin-bottom: 25px" class="nav nav-tabs">
                  <li role="presentation" class="active"><a id="font-tab" href="#font" role="tab" data-toggle="tab" aria-controls="font" aria-expanded="true">Font</a></li>
                  <li role="presentation"><a id="text-tab" href="#text" role="tab" data-toggle="tab" aria-controls="text" aria-expanded="true">Text</a></li>
                  <li role="presentation"><a id="background-tab" href="#background" role="tab" data-toggle="tab" aria-controls="background" aria-expanded="true">Background</a></li>
                  <li role="presentation"><a id="padding-tab" href="#padding" role="tab" data-toggle="tab" aria-controls="padding" aria-expanded="true">Padding</a></li>
                  <li role="presentation"><a id="margin-tab" href="#margin" role="tab" data-toggle="tab" aria-controls="margin" aria-expanded="false">Margin</a></li>
                  <li role="presentation"><a id="box-shadow-tab" href="#box-shadow" role="tab" data-toggle="tab" aria-controls="box-shadow" aria-expanded="true">Box Shadow</a></li>
                  <li role="presentation"><a id="responsive-tab" href="#responsive" role="tab" data-toggle="tab" aria-controls="responsive" aria-expanded="false">Responsive</a></li>
                  <li role="presentation"><a id="other-tab" href="#other" role="tab" data-toggle="tab" aria-controls="other" aria-expanded="true">Other</a></li>
                </ul>
                <div class="tab-content">
                  <div id="font" role="tabpanel" aria-labelledby="font-tab" class="tab-pane fade active in">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="13" class="text-center">1</th>
                          <td><code>.fs-10</code></td>
                          <td>Sets font size to 10px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-11</code></td>
                          <td>Sets font size to 11px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-12</code></td>
                          <td>Sets font size to 12px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-13</code></td>
                          <td>Sets font size to 13px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-14</code></td>
                          <td>Sets font size to 14px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-16</code></td>
                          <td>Sets font size to 16px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-18</code></td>
                          <td>Sets font size to 18px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-20</code></td>
                          <td>Sets font size to 20px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-24</code></td>
                          <td>Sets font size to 24px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-30</code></td>
                          <td>Sets font size to 30px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-36</code></td>
                          <td>Sets font size to 36px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-60</code></td>
                          <td>Sets font size to 60px</td>
                        </tr>
                        <tr>
                          <td><code>.fs-100</code></td>
                          <td>Sets font size to 100px</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">2</th>
                          <td><code>.fw-300</code></td>
                          <td>Sets font weight to 300</td>
                        </tr>
                        <tr>
                          <td><code>.fw-400</code></td>
                          <td>Sets font weight to 400</td>
                        </tr>
                        <tr>
                          <td><code>.fw-500</code></td>
                          <td>Sets font weight to 500</td>
                        </tr>
                        <tr>
                          <td><code>.fw-600</code></td>
                          <td>Sets font weight to 600</td>
                        </tr>
                        <tr>
                          <td><code>.fw-700</code></td>
                          <td>Sets font weight to 700</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="6" class="text-center">3</th>
                          <td><code>.h1</code></td>
                          <td>Sets font style to match with h1 tag</td>
                        </tr>
                        <tr>
                          <td><code>.h2</code></td>
                          <td>Sets font style to match with h2 tag</td>
                        </tr>
                        <tr>
                          <td><code>.h3</code></td>
                          <td>Sets font style to match with h3 tag</td>
                        </tr>
                        <tr>
                          <td><code>.h4</code></td>
                          <td>Sets font style to match with h4 tag</td>
                        </tr>
                        <tr>
                          <td><code>.h5</code></td>
                          <td>Sets font style to match with h5 tag</td>
                        </tr>
                        <tr>
                          <td><code>.h6</code></td>
                          <td>Sets font style to match with h6 tag</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="text" role="tabpanel" aria-labelledby="text-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="8" class="text-center">1</th>
                          <td><code>.text-left</code></td>
                          <td>Indicates left-aligned text</td>
                        </tr>
                        <tr>
                          <td><code>.text-center</code></td>
                          <td>Indicates center-aligned text</td>
                        </tr>
                        <tr>
                          <td><code>.text-right</code></td>
                          <td>Indicates right-aligned text</td>
                        </tr>
                        <tr>
                          <td><code>.text-justify</code></td>
                          <td>Indicates justified text</td>
                        </tr>
                        <tr>
                          <td><code>.text-nowrap</code></td>
                          <td>Indicates no wrap text</td>
                        </tr>
                        <tr>
                          <td><code>.text-lowercase</code></td>
                          <td>Indicates lowercased text</td>
                        </tr>
                        <tr>
                          <td><code>.text-uppercase</code></td>
                          <td>Indicates uppercased text</td>
                        </tr>
                        <tr>
                          <td><code>.text-capitalize</code></td>
                          <td>Indicates capitalized text</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="14" class="text-center">2</th>
                          <td><code>.text-muted</code></td>
                          <td>Sets font color to dark gray</td>
                        </tr>
                        <tr>
                          <td><code>.text-primary</code></td>
                          <td>Sets font color to blue</td>
                        </tr>
                        <tr>
                          <td><code>.text-success</code></td>
                          <td>Sets font color to teal</td>
                        </tr>
                        <tr>
                          <td><code>.text-info</code></td>
                          <td>Sets font color to light blue</td>
                        </tr>
                        <tr>
                          <td><code>.text-warning</code></td>
                          <td>Sets font color to yellow</td>
                        </tr>
                        <tr>
                          <td><code>.text-danger</code></td>
                          <td>Sets font color to red</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="background" role="tabpanel" aria-labelledby="background-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="13" class="text-center">2</th>
                          <td><code>.bg-primary</code></td>
                          <td>Sets background color to blue</td>
                        </tr>
                        <tr>
                          <td><code>.bg-success</code></td>
                          <td>Sets background color to teal</td>
                        </tr>
                        <tr>
                          <td><code>.bg-info</code></td>
                          <td>Sets background color to light blue</td>
                        </tr>
                        <tr>
                          <td><code>.bg-warning</code></td>
                          <td>Sets background color to yellow</td>
                        </tr>
                        <tr>
                          <td><code>.bg-danger</code></td>
                          <td>Sets background color to red</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="padding" role="tabpanel" aria-labelledby="padding-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">1</th>
                          <td><code>.p-0</code></td>
                          <td>Sets padding to zero</td>
                        </tr>
                        <tr>
                          <td><code>.pt-0</code></td>
                          <td>Sets top padding to zero</td>
                        </tr>
                        <tr>
                          <td><code>.pr-0</code></td>
                          <td>Sets right padding to zero</td>
                        </tr>
                        <tr>
                          <td><code>.pb-0</code></td>
                          <td>Sets bottom padding to zero</td>
                        </tr>
                        <tr>
                          <td><code>.pl-0</code></td>
                          <td>Sets left padding to zero</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">2</th>
                          <td><code>.p-5</code></td>
                          <td>Adds 5px of padding on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.pt-5</code></td>
                          <td>Adds 5px of padding to the top</td>
                        </tr>
                        <tr>
                          <td><code>.pr-5</code></td>
                          <td>Adds 5px of padding to the right</td>
                        </tr>
                        <tr>
                          <td><code>.pb-5</code></td>
                          <td>Adds 5px of padding to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.pl-5</code></td>
                          <td>Adds 5px of padding to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">3</th>
                          <td><code>.p-10</code></td>
                          <td>Adds 10px of padding on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.pt-10</code></td>
                          <td>Adds 10px of padding to the top</td>
                        </tr>
                        <tr>
                          <td><code>.pr-10</code></td>
                          <td>Adds 10px of padding to the right</td>
                        </tr>
                        <tr>
                          <td><code>.pb-10</code></td>
                          <td>Adds 10px of padding to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.pl-10</code></td>
                          <td>Adds 10px of padding to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">4</th>
                          <td><code>.p-15</code></td>
                          <td>Adds 15px of padding on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.pt-15</code></td>
                          <td>Adds 15px of padding to the top</td>
                        </tr>
                        <tr>
                          <td><code>.pr-15</code></td>
                          <td>Adds 15px of padding to the right</td>
                        </tr>
                        <tr>
                          <td><code>.pb-15</code></td>
                          <td>Adds 15px of padding to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.pl-15</code></td>
                          <td>Adds 15px of padding to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">5</th>
                          <td><code>.p-20</code></td>
                          <td>Adds 20px of padding on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.pt-20</code></td>
                          <td>Adds 20px of padding to the top</td>
                        </tr>
                        <tr>
                          <td><code>.pr-20</code></td>
                          <td>Adds 20px of padding to the right</td>
                        </tr>
                        <tr>
                          <td><code>.pb-20</code></td>
                          <td>Adds 20px of padding to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.pl-20</code></td>
                          <td>Adds 20px of padding to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">6</th>
                          <td><code>.p-25</code></td>
                          <td>Adds 25px of padding on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.pt-25</code></td>
                          <td>Adds 25px of padding to the top</td>
                        </tr>
                        <tr>
                          <td><code>.pr-25</code></td>
                          <td>Adds 25px of padding to the right</td>
                        </tr>
                        <tr>
                          <td><code>.pb-25</code></td>
                          <td>Adds 25px of padding to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.pl-25</code></td>
                          <td>Adds 25px of padding to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">7</th>
                          <td><code>.p-30</code></td>
                          <td>Adds 30px of padding on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.pt-30</code></td>
                          <td>Adds 30px of padding to the top</td>
                        </tr>
                        <tr>
                          <td><code>.pr-30</code></td>
                          <td>Adds 30px of padding to the right</td>
                        </tr>
                        <tr>
                          <td><code>.pb-30</code></td>
                          <td>Adds 30px of padding to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.pl-30</code></td>
                          <td>Adds 30px of padding to the left</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="margin" role="tabpanel" aria-labelledby="margin-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">1</th>
                          <td><code>.m-0</code></td>
                          <td>Sets margin to zero</td>
                        </tr>
                        <tr>
                          <td><code>.mt-0</code></td>
                          <td>Sets top margin to zero</td>
                        </tr>
                        <tr>
                          <td><code>.mr-0</code></td>
                          <td>Sets right margin to zero</td>
                        </tr>
                        <tr>
                          <td><code>.mb-0</code></td>
                          <td>Sets bottom margin to zero</td>
                        </tr>
                        <tr>
                          <td><code>.ml-0</code></td>
                          <td>Sets left margin to zero</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">2</th>
                          <td><code>.m-5</code></td>
                          <td>Adds 5px of margin on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.mt-5</code></td>
                          <td>Adds 5px of margin to the top</td>
                        </tr>
                        <tr>
                          <td><code>.mr-5</code></td>
                          <td>Adds 5px of margin to the right</td>
                        </tr>
                        <tr>
                          <td><code>.mb-5</code></td>
                          <td>Adds 5px of margin to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.ml-5</code></td>
                          <td>Adds 5px of margin to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">3</th>
                          <td><code>.m-10</code></td>
                          <td>Adds 10px of margin on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.mt-10</code></td>
                          <td>Adds 10px of margin to the top</td>
                        </tr>
                        <tr>
                          <td><code>.mr-10</code></td>
                          <td>Adds 10px of margin to the right</td>
                        </tr>
                        <tr>
                          <td><code>.mb-10</code></td>
                          <td>Adds 10px of margin to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.ml-10</code></td>
                          <td>Adds 10px of margin to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">4</th>
                          <td><code>.m-15</code></td>
                          <td>Adds 15px of margin on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.mt-15</code></td>
                          <td>Adds 15px of margin to the top</td>
                        </tr>
                        <tr>
                          <td><code>.mr-15</code></td>
                          <td>Adds 15px of margin to the right</td>
                        </tr>
                        <tr>
                          <td><code>.mb-15</code></td>
                          <td>Adds 15px of margin to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.ml-15</code></td>
                          <td>Adds 15px of margin to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">5</th>
                          <td><code>.m-20</code></td>
                          <td>Adds 20px of margin on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.mt-20</code></td>
                          <td>Adds 20px of margin to the top</td>
                        </tr>
                        <tr>
                          <td><code>.mr-20</code></td>
                          <td>Adds 20px of margin to the right</td>
                        </tr>
                        <tr>
                          <td><code>.mb-20</code></td>
                          <td>Adds 20px of margin to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.ml-20</code></td>
                          <td>Adds 20px of margin to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">6</th>
                          <td><code>.m-25</code></td>
                          <td>Adds 25px of margin on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.mt-25</code></td>
                          <td>Adds 25px of margin to the top</td>
                        </tr>
                        <tr>
                          <td><code>.mr-25</code></td>
                          <td>Adds 25px of margin to the right</td>
                        </tr>
                        <tr>
                          <td><code>.mb-25</code></td>
                          <td>Adds 25px of margin to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.ml-25</code></td>
                          <td>Adds 25px of margin to the left</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">7</th>
                          <td><code>.m-30</code></td>
                          <td>Adds 30px of margin on all sides</td>
                        </tr>
                        <tr>
                          <td><code>.mt-30</code></td>
                          <td>Adds 30px of margin to the top</td>
                        </tr>
                        <tr>
                          <td><code>.mr-30</code></td>
                          <td>Adds 30px of margin to the right</td>
                        </tr>
                        <tr>
                          <td><code>.mb-30</code></td>
                          <td>Adds 30px of margin to the bottom</td>
                        </tr>
                        <tr>
                          <td><code>.ml-30</code></td>
                          <td>Adds 30px of margin to the left</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="box-shadow" role="tabpanel" aria-labelledby="box-shadow-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="2" class="text-center">1</th>
                          <td><code>.no-shadow</code></td>
                          <td>Removes box-shadow from the element</td>
                        </tr>
                        <tr>
                          <td><code>.no-border</code></td>
                          <td>Removes border from the element</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="4" class="text-center">2</th>
                          <td><code>.bd-t</code></td>
                          <td>Sets top border to the element</td>
                        </tr>
                        <tr>
                          <td><code>.bd-r</code></td>
                          <td>Sets right border to the element</td>
                        </tr>
                        <tr>
                          <td><code>.bd-b</code></td>
                          <td>Sets bottom border to the element</td>
                        </tr>
                        <tr>
                          <td><code>.bd-l</code></td>
                          <td>Sets left border to the element</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="responsive" role="tabpanel" aria-labelledby="responsive-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <tbody>
                        <tr>
                          <td>Class</td>
                          <td>Extra small devices<small class="block text-muted">Phones (<768px)</small></td>
                          <td>Small devices<small class="block text-muted">Tablets (≥768px)</small></td>
                          <td>Medium devices<small class="block text-muted">Desktops (≥992px)</small></td>
                          <td>Large devices<small class="block text-muted">Desktops (≥1200px)</small></td>
                        </tr>
                        <tr>
                          <td><code>.visible-xs</code></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                        </tr>
                        <tr>
                          <td><code>.visible-sm</code></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                        </tr>
                        <tr>
                          <td><code>.visible-md</code></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                        </tr>
                        <tr>
                          <td><code>.visible-lg</code></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                        </tr>
                        <tr>
                          <td><code>.hidden-xs</code></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                        </tr>
                        <tr>
                          <td><code>.hidden-sm</code></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                        </tr>
                        <tr>
                          <td><code>.hidden-md</code></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                        </tr>
                        <tr>
                          <td><code>.hidden-lg</code></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-check text-success"></i></td>
                          <td class="text-center"><i class="ti-close text-danger"></i></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div id="other" role="tabpanel" aria-labelledby="other-tab" class="tab-pane fade">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center">#</th>
                          <th>Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" rowspan="4" class="text-center">1</th>
                          <td><code>.pull-left</code></td>
                          <td>Floats the element to the left</td>
                        </tr>
                        <tr>
                          <td><code>.pull-right</code></td>
                          <td>Floats the element to the right</td>
                        </tr>
                        <tr>
                          <td><code>.center-block</code></td>
                          <td>Sets the element to display:block and center</td>
                        </tr>
                        <tr>
                          <td><code>.clearfix</code></td>
                          <td>Clears all floats in the element</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="5" class="text-center">2</th>
                          <td><code>.show</code></td>
                          <td>Forces the element to be shown</td>
                        </tr>
                        <tr>
                          <td><code>.hidden</code></td>
                          <td>Forces the element to be hidden</td>
                        </tr>
                        <tr>
                          <td><code>.sr-only</code></td>
                          <td>Hides the element to all devices except screen readers</td>
                        </tr>
                        <tr>
                          <td><code>.sr-only-focusable</code></td>
                          <td>Combine with .sr-only to show the element again when it is focused</td>
                        </tr>
                        <tr>
                          <td><code>.text-hide</code></td>
                          <td>Helps replace the element's text content with a background image</td>
                        </tr>
                        <tr>
                          <th scope="row" rowspan="2" class="text-center">3</th>
                          <td><code>.close</code></td>
                          <td>Indicates a close icon</td>
                        </tr>
                        <tr>
                          <td><code>.caret</code></td>
                          <td>Indicates dropdown functionality</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <h2>Credits</h2>
              <ul>
                <li><a href="http://getbootstrap.com/" target="_blank">Bootstrap 3.3.6</a></li>
                <li><a href="https://jquery.com/" target="_blank">jQuery 2.2.1</a></li>
                <li><a href="http://bower.io/" target="_blank">Bower</a></li>
                <li><a href="https://nodejs.org/" target="_blank">Node.js</a></li>
                <li><a href="https://git-scm.com/" target="_blank">Git</a></li>
                <li><a href="http://gulpjs.com/" target="_blank">Gulp</a></li>
                <li><a href="http://lesscss.org/" target="_blank">Less</a></li>
                <li><a href="https://www.browsersync.io/" target="_blank">Browser Sync</a></li>
              </ul>
              <h3>Images</h3>
              <ul>
                <li><a href="http://www.pexels.com/" target="_blank">PEXELS</a></li>
                <li><a href="http://uifaces.com/" target="_blank">uiFaces</a></li>
              </ul>
              <h3>Data Generator</h3>
              <ul>
                <li><a href="http://www.freedatagenerator.com/" target="_blank">Free Data Generator</a></li>
                <li><a href="http://uinames.com/" target="_blank">uiNames</a></li>
              </ul>
              <h3>Fonts & Icons</h3>
              <ul>
                <li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a></li>
                <li><a href="http://zavoloklom.github.io/material-design-iconic-font/" target="_blank">Material Design Iconic Font</a></li>
                <li><a href="https://themify.me/themify-icons" target="_blank">Themify Icons</a></li>
                <li><a href="https://github.com/erikflowers/weather-icons" target="_blank">Weather Icons</a></li>
                <li><a href="https://www.google.com/fonts/specimen/Poppins" target="_blank">Poppins</a></li>
              </ul>
              <h3>Plugins</h3>
              <ul>
                <li><a href="http://labs.bigroomstudios.com/libraries/animo-js" target="_blank">Animo.js</a></li>
                <li><a href="https://github.com/malsup/blockui" target="_blank">BlockUI</a></li>
                <li><a href="https://github.com/istvan-ujjmeszaros/bootstrap-colorpickersliders" target="_blank">Bootstrap Color Picker Sliders</a></li>
                <li><a href="http://www.daterangepicker.com" target="_blank">Bootstrap Date Range Picker</a></li>
                <li><a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox/" target="_blank">Bootstrap Dual Listbox</a></li>
                <li><a href="http://plugins.krajee.com/file-input" target="_blank">Bootstrap File Input</a></li>
                <li><a href="http://markusslima.github.io/bootstrap-filestyle" target="_blank">Bootstrap FileStyle</a></li>
                <li><a href="http://www.codingdrama.com/bootstrap-markdown" target="_blank">Bootstrap Markdown</a></li>
                <li><a href="http://mimo84.github.io/bootstrap-maxlength" target="_blank">Bootstrap Maxlength</a></li>
                <li><a href="https://github.com/dgoguerra/bootstrap-menu" target="_blank">Bootstrap Context Menu</a></li>
                <li><a href="http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-3-4" target="_blank">Bootstrap Progressbar</a></li>
                <li><a href="http://silviomoreto.github.io/bootstrap-select" target="_blank">Bootstrap Select</a></li>
                <li><a href="http://lipis.github.io/bootstrap-sweetalert" target="_blank">Bootstrap SweetAlert</a></li>
                <li><a href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/" target="_blank">Bootstrap Tags Input</a></li>
                <li><a href="http://www.virtuosoft.eu/code/bootstrap-touchspin" target="_blank">Bootstrap TouchSpin</a></li>
                <li><a href="https://github.com/mindmup/bootstrap-wysiwyg" target="_blank">Bootstrap Wysiwyg</a></li>
                <li><a href="https://github.com/Kunstmaan/BootstrapCK4-Skin" target="_blank">CKEditor</a></li>
                <li><a href="http://www.chartjs.org" target="_blank">Chart.js</a></li>
                <li><a href="https://github.com/vitalets/clockface" target="_blank">Clockface</a></li>
                <li><a href="https://github.com/weareoutman/clockpicker" target="_blank">ClockPicker</a></li>
                <li><a href="https://github.com/codemirror/CodeMirror" target="_blank">Code Mirror</a></li>
                <li><a href="https://github.com/bfintal/Counter-Up" target="_blank">Counter-Up</a></li>
                <li><a href="http://fengyuanchen.github.io/cropper" target="_blank">Cropper</a></li>
                <li><a href="https://www.datatables.net" target="_blank">DataTables</a></li>
                <li><a href="http://www.dropzonejs.com" target="_blank">DropzoneJS</a></li>
                <li><a href="https://eonasdan.github.io/bootstrap-datetimepicker" target="_blank">Bootstrap Datetime Picker</a></li>
                <li><a href="http://www.flotcharts.org" target="_blank">Flot</a></li>
                <li><a href="http://fullcalendar.io" target="_blank">FullCalendar</a></li>
                <li><a href="http://ubilabs.github.io/geocomplete" target="_blank">Geocomplete</a></li>
                <li><a href="https://github.com/risq/jquery-advanced-news-ticker" target="_blank">JQuery Advanced News Ticker</a></li>
                <li><a href="https://rendro.github.io/easy-pie-chart" target="_blank">jQuery Easy Pie Chart</a></li>
                <li><a href="http://mbut.github.io/jquery.mlkeyboard" target="_blank">jQuery MultiLanguage Keyboard</a></li>
                <li><a href="http://www.jquery-steps.com/Examples" target="_blank">jQuery Steps</a></li>
                <li><a href="http://labs.abeautifulsite.net/jquery-minicolors" target="_blank">jQuery MiniColors</a></li>
                <li><a href="https://github.com/jquery/jquery-mousewheel" target="_blank">jQuery Mousewheel</a></li>
                <li><a href="http://omnipotent.net/jquery.sparkline" target="_blank">jQuery Sparklines</a></li>
                <li><a href="https://jqueryui.com" target="_blank">jQuery UI</a></li>
                <li><a href="http://jqueryvalidation.org" target="_blank">jQuery Validation</a></li>
                <li><a href="https://github.com/carhartl/jquery-cookie" target="_blank">jQuery Cookie</a></li>
                <li><a href="http://msurguy.github.io/ladda-bootstrap" target="_blank">Ladda UI</a></li>
                <li><a href="http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html" target="_blank">Malihu Custom Scrollbar</a></li>
                <li><a href="https://mochajs.org" target="_blank">Mocha</a></li>
                <li><a href="http://morrisjs.github.io/morris.js" target="_blank">Morris.js</a></li>
                <li><a href="http://owlgraphic.com/owlcarousel" target="_blank">Owl Carousel</a></li>
                <li><a href="http://auxiliary.github.io/rpage" target="_blank">Responsive Pagination</a></li>
                <li><a href="http://tobiasahlin.com/spinkit" target="_blank">Spinkit</a></li>
                <li><a href="http://summernote.org" target="_blank">Summernote</a></li>
                <li><a href="https://github.com/CodeSeven/toastr" target="_blank">Toastr</a></li>
                <li><a href="http://github.hubspot.com/pace/docs/welcome" target="_blank">PACE</a></li>
                <li><a href="http://imakewebthings.com/waypoints" target="_blank">Waypoints</a></li>
                <li><a href="https://github.com/google/code-prettify" target="_blank">Code Prettify</a></li>
                <li><a href="http://tympanus.net/codrops/2015/11/19/some-inspiration-for-pricing-tables/" target="_blank">Pricing Tables</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Work Here end-->
    <!-- Right Sidebar start-->
    <aside class="right-sidebar closed"><a href="javascript:;" role="button" class="right-sidebar-toggle pull-right"><i class="ti-close text-muted"></i></a>
      <h4 id="chat-title" class="text-center m-0 mb-20 fs-16">Chat list</h4>
      <form id="chat-search" class="mb-10">
        <div class="form-group has-feedback mb-0">
          <input type="text" aria-describedby="inputChatSearch" placeholder="Chat with..." class="form-control rounded"><span aria-hidden="true" class="ti-search form-control-feedback"></span><span id="inputChatSearch" class="sr-only">(default)</span>
        </div>
      </form>
      <ul class="chat-list mb-0 fs-12 media-list">
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/20.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Jane Curtis</h6>
              <p class="text-muted mb-0">Where are you from?</p>
            </div>
            <div class="media-right"><span class="badge bg-danger">2</span></div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/01.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Edward Garcia</h6>
              <p class="text-muted mb-0">Nice to meet you.</p>
            </div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/02.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Bruce Olson</h6>
              <p class="text-muted mb-0">What do you want to do?</p>
            </div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/03.jpg" alt="" class="media-object img-circle"><span class="status bg-warning"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Martha Rodriguez</h6>
              <p class="text-muted mb-0">I'm hungry.</p>
            </div>
            <div class="media-right"><span class="badge bg-danger">1</span></div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/05.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Hannah Williamson</h6>
              <p class="text-muted mb-0">Do you know the address?</p>
            </div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/06.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Anthony Mills</h6>
              <p class="text-muted mb-0">No problem.</p>
            </div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/07.jpg" alt="" class="media-object img-circle"><span class="status bg-warning"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Ethan Stanley</h6>
              <p class="text-muted mb-0">Hello?</p>
            </div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/08.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Jonathan Castro</h6>
              <p class="text-muted mb-0">OK. Thanks.</p>
            </div>
            <div class="media-right"><span class="badge bg-danger">1</span></div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/09.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Denise Rose</h6>
              <p class="text-muted mb-0">Bye bye.</p>
            </div></a></li>
        <li class="media"><a href="javascript:;" class="conversation-toggle">
            <div class="media-left avatar"><img src="build/images/users/10.jpg" alt="" class="media-object img-circle"><span class="status bg-danger"></span></div>
            <div class="media-body">
              <h6 class="media-heading">Eugene Meyer</h6>
              <p class="text-muted mb-0">How are you?</p>
            </div></a></li>
      </ul>
    </aside>
    <aside class="conversation closed"><a href="javascript:;" class="conversation-toggle pull-left"><i class="ti-arrow-left text-muted"></i></a><a href="javascript:;" class="pull-right"><i class="ti-pencil text-muted"></i></a>
      <h5 id="chat-with" class="text-center m-0 mb-20">Edward Garcia</h5>
      <ul class="media-list chat-content fs-12">
        <li class="media">
          <div class="media-left avatar"><img src="build/images/users/04.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
          <div class="media-body">
            <p>Hello.</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted">09:45 PM <i class="ti-check text-success"></i></time>
          </div>
        </li>
        <li class="media other">
          <div class="media-body">
            <p>Hi.</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted pull-right">09:46 PM <i class="ti-check text-success"></i></time>
          </div>
          <div class="media-right avatar"><img src="build/images/users/18.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
        </li>
        <li class="media">
          <div class="media-left avatar"><img src="build/images/users/04.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
          <div class="media-body">
            <p>How are you?</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted">09:47 PM <i class="ti-check text-success"></i></time>
          </div>
        </li>
        <li class="media other">
          <div class="media-body">
            <p>I'm good. How are you?</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted pull-right">09:50 PM <i class="ti-check text-success"></i></time>
          </div>
          <div class="media-right avatar"><img src="build/images/users/18.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
        </li>
        <li class="media">
          <div class="media-left avatar"><img src="build/images/users/04.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
          <div class="media-body">
            <p>Good. Do you speak English?</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted">09:55 PM <i class="ti-check text-success"></i></time>
          </div>
        </li>
        <li class="media other">
          <div class="media-body">
            <p>A little. Are you American?</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted pull-right">09:56 PM <i class="ti-check text-success"></i></time>
          </div>
          <div class="media-right avatar"><img src="build/images/users/18.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
        </li>
        <li class="media">
          <div class="media-left avatar"><img src="build/images/users/04.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
          <div class="media-body">
            <p>Yes.</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted">10:00 PM <i class="ti-check text-success"></i></time>
          </div>
        </li>
        <li class="media other">
          <div class="media-body">
            <p>Where are you from?</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted pull-right">10:01 PM <i class="ti-check text-success"></i></time>
          </div>
          <div class="media-right avatar"><img src="build/images/users/18.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
        </li>
        <li class="media">
          <div class="media-left avatar"><img src="build/images/users/04.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
          <div class="media-body">
            <p>I'm from California.</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted">10:03 PM <i class="ti-check text-success"></i></time>
          </div>
        </li>
        <li class="media other">
          <div class="media-body">
            <p>Nice to meet you.</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted pull-right">10:04 PM <i class="ti-check text-success"></i></time>
          </div>
          <div class="media-right avatar"><img src="build/images/users/18.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
        </li>
        <li class="media">
          <div class="media-left avatar"><img src="build/images/users/04.jpg" alt="" class="media-object img-circle"><span class="status bg-success"></span></div>
          <div class="media-body">
            <p>Nice to meet you too.</p>
            <time datetime="2015-12-10T20:50:48+07:00" class="fs-11 text-muted">10:05 PM <i class="ti-check text-success"></i></time>
          </div>
        </li>
      </ul>
      <form id="chat-input">
        <div class="form-group has-feedback mb-0">
          <input type="text" aria-describedby="inputSendMessage" placeholder="Sent a message" class="form-control rounded"><span aria-hidden="true" class="ti-pencil-alt form-control-feedback"></span><span id="inputSendMessage" class="sr-only">(default)</span>
        </div>
      </form>
    </aside>
    <!-- Right Sidebar end-->
    <!-- Demo Settings start-->
    <div class="setting closed"><a href="javascript:;" class="setting-toggle fs-16"><i class="ti-settings text-muted"></i></a>
      <h4 class="fs-16 mt-0 mb-15">Demo settings</h4>
      <form class="form-horizontal">
        <div class="clearfix">
          <h6 class="pull-left fs-13 fw-400">Fixed Header</h6>
          <div class="switch pull-right">
            <input id="fixed-header" type="checkbox">
            <label for="fixed-header" class="switch-success"></label>
          </div>
        </div>
        <div class="clearfix">
          <h6 class="pull-left fs-13 fw-400">Fixed Sidebar</h6>
          <div class="switch pull-right">
            <input id="fixed-sidebar" type="checkbox">
            <label for="fixed-sidebar" class="switch-success"></label>
          </div>
        </div>
        <div class="clearfix hidden-xs">
          <h6 class="pull-left fs-13 fw-400">Pinned Sidebar</h6>
          <div class="switch pull-right">
            <input id="pinned-sidebar" type="checkbox">
            <label for="pinned-sidebar" class="switch-success"></label>
          </div>
        </div>
        <div class="clearfix hidden-xs">
          <h6 class="pull-left fs-13 fw-400">Closed Sidebar</h6>
          <div class="switch pull-right">
            <input id="closed-sidebar" type="checkbox">
            <label for="closed-sidebar" class="switch-success"></label>
          </div>
        </div>
        <div class="clearfix">
          <h6 class="pull-left fs-13 fw-400">Native Scrollbar</h6>
          <div class="switch pull-right">
            <input id="native-scrollbar" type="checkbox">
            <label for="native-scrollbar" class="switch-success"></label>
          </div>
        </div>
      </form>
    </div>
    <!-- Demo Settings end-->
    <div tabindex="-1" role="dialog" aria-labelledby="composeMail" class="modal fade compose-mail-modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-black">
            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
            <h4 id="composeMail" class="modal-title">Compose Message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <input id="exampleInputEmail" type="text" placeholder="To" class="form-control">
              </div>
              <div class="form-group">
                <input id="exampleInputSubject" type="text" placeholder="Subject" class="form-control">
              </div>
              <textarea id="compose-mail"></textarea>
              <div class="text-right">
                <button type="button" data-dismiss="modal" class="btn btn-raised btn-default">Close</button>
                <button type="button" class="btn btn-raised btn-black">Send Mail</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery-->
    <script type="text/javascript" src="plugins/jquery/dist/jquery.min.js"></script>
    <!-- jQuery Cookie-->
    <script type="text/javascript" src="plugins/jquery.cookie/jquery.cookie.js"></script>
    <!-- Bootstrap JavaScript-->
    <script type="text/javascript" src="plugins/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- jQuery Advanced News Ticker-->
    <script type="text/javascript" src="plugins/jquery-advanced-news-ticker/js/newsTicker.js"></script>
    <!-- Malihu Scrollbar-->
    <script type="text/javascript" src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- Animo.js-->
    <script type="text/javascript" src="plugins/animo.js/animo.min.js"></script>
    <!-- Bootstrap Progressbar-->
    <script type="text/javascript" src="plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- Sparkline-->
    <script type="text/javascript" src="plugins/kapusta-jquery.sparkline/dist/jquery.sparkline.min.js"></script>
    <!-- Summernote-->
    <script type="text/javascript" src="plugins/summernote/dist/summernote.min.js"></script>
    <!-- Code Prettify-->
    <script type="text/javascript" src="plugins/code-prettify/src/run_prettify.js"></script>
    <!-- Custom JS-->
    <script type="text/javascript" src="build/js/app.js"></script>
    <script type="text/javascript" src="build/js/demo.js"></script>
  </body>
</html>